<template>
	<view class="newRecommend">
		<view v-if="detail.type == 1" class="sc-tour">
			<view class="list" v-for="(item,index) in detail.list" @tap.stop="$emit('detailTap',item,'1')" :key="index">
				<view class="pic">
					<view v-if="item.tags_name" class="sc-tour-li-tags" ><text>{{item.tags_name}}</text></view>
					<image class="pic-cover" :src="item.cover" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="info_tilte">
						{{item.name}}
					</view>
					<!-- <view class="desc">
						{{item.brief}}
					</view> -->
					<!-- <view class="num">
						月销量{{item.num}}
					</view> -->
					<view class="volume volume-font" v-if="item.sales"><image :src="Url+'add_images/ic-hotone.png'" mode="widthFix"></image>销量:{{item.sales}}</view>
					<view class="clearfix pro-flex">
						<view class="price ">
							<text class="price_now">{{item.price}}</text>
							<text class="price_line" v-if="item.cost_price">￥{{item.cost_price}}</text>
						</view>
						<view class="addcart">
							<image :src="Url+'add_images/ic-add.png'" mode=""></image>
						</view>
					</view>
					
					<!-- <slot @tap="change(index,key)" name="add_delet"></slot> -->
				</view>
			</view>
			<!-- <view class="sc-tour-li" v-for="(item,index) in detail.list" :key="index" @tap.stop="$emit('detailTap',item,'1')">
				<view v-if="item.tags_name" class="sc-tour-li-tags top" :style="detail.type == 1 ? 'transform: scale(0.8,0.8);' : ''"><text>{{item.tags_name}}</text></view>
				<image class="sc-tour-li_img" mode="widthFix" :src="item.cover"></image>
				<view class="sc-tour-li_right">
					<view class="font">{{item.name}}</view>
					<view class="sc-tour-li_price">
						<view class="sc-tour-li_toll">￥{{item.price}}</view>
						<image class="product_info_add" :src="Url+'add_images/ic-add.png'"></image>
					</view>
				</view>
			</view> -->
		</view>
		<ul v-else>
			<li v-for="(item,index) in detail.list" :key="index" :style="{width:width}" >
				<view class="newRecommend-warp" @tap.stop="$emit('detailTap',item,'1')">
					<view v-if="item.tags_name" class="sc-tour-li-tags" :style="detail.type == 3 ? 'transform: scale(0.8,0.8);' : ''"><text>{{item.tags_name}}</text></view>
					<image :src="item.cover" mode="widthFix"></image>
					<view class="goodsInfo">
						<!-- <view :class="[detail.type == 2 ? 'goodsTitle-dan' : 'goodsTitle']">{{item.name}}</view> -->
						<view class="goodsTitle-dan">{{item.name}}</view>
						<text class="product_info_price" v-if="detail.type == 3 && item.cost_price"> ￥{{item.cost_price}}</text>
						<view class="newRecommend-warp-perve">
							<view class="product_info_b">
								<text class="integral_num">{{item.price}}</text>
								<text class="price" v-if="detail.type != 3 && item.cost_price">￥{{item.cost_price}}</text>
							</view>
							<image class="product_info_add" :src="Url+'add_images/ic-add.png'"></image>
						</view>
						
					</view>
				</view>
			</li>
		</ul>
	
	</view>
</template>

<script>
		import footer from '@/components/footer/footer.vue'
	export default {
		components:{
			footer
		},
		props:{
			detail:{
				type:Object
			}
		},
		data() {
			return {
				width:'100%',
				Url:this.Imgurl
			}
		},
		created() {
			let status = this.detail.type;
			if(status == 1){
				this.width = '100%';
			}else if(status == 2){
				this.width = '50%';
			}else{
				this.width = '33.3%';
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
	@import '@/static/scss/list/list.less';
	.sc-tour{
		overflow: hidden;
		background-color: #FFFFFF;
		padding: 20upx;
		&-li{
			padding: 20upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			box-sizing: border-box;
			margin-top: 20upx;
			background-color: #FFFFFF;
			position: relative;
			&:last-child{
				&-li_right{
					border: none;
				}
			}
			position: relative;
			.sc-tour-li-tags{
				position: absolute;
				top: 0;
				left:5%;
				width: 65upx;
				height: 64upx;
				font-size: 18upx;
				color: #FFFFFF;
				word-wrap: break-word;
				word-break: break-all;
				text-align: center;
				background-image: url('https://jy-shops.oss-cn-beijing.aliyuncs.com/client/image/add_images/sc-tags.png');
				background-size: cover;
				z-index: 10;
				transform-origin: 0 0;
				padding: 0 10upx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				&.top{
					top: 20upx;
				}
				text{
					transform: scale(0.8,0.8);
					line-height: 1.3;
				}
			}
		}
		&-li_img{
			width: 218upx;
			height: 218upx;
			position: relative;
		}
		&-li-tags{
			position:absolute;
			top: 0;
			left: 20%;
			width: 65upx;
			height: 64upx;
		}
		&-li_right{
			// margin-left: 40upx;
			display: flex;
			flex-direction:column;
			justify-content: space-between;
			position: absolute;
			right: 0;
			top: 0;
			padding: 16upx;
			box-sizing: border-box;
			height: 100%;
			.font{
				font-size: 28upx;
				color: #333333;
				height: 40upx;
				line-height: 40upx;
				width: 450upx;
			}
			.class{
				font-size: 24upx;
				color: #999999;
				display: block;
				margin:10upx 0;
			}
			.class-tuanA{
				width: auto;
				height: auto;
				float: left;
				margin: 10upx 0;
				// padding: 6upx 14upx;
				background-color: #FD7377;
				// color: #FFFFFF;
				font-size: 22upx;
				border: 2upx solid #FD7377;
				border-radius:5upx;
				overflow: hidden;
				text{
					&:first-child{
						padding: 6upx 14upx;
						color: #FFFFFF;
						box-sizing: border-box;
					}
					&:last-child{
					  padding:7upx;
					  background-color: #FFFFFF;
					  color: #FD7377;
					  font-size: 18upx;	
					  box-sizing: border-box;
					}
				}
			}
			.class-tuan{
				font-size:24upx;
				font-weight: 500;
				color: rgba(255,40,66,1);
				margin: 10upx 0;
				display: flex;
				align-items: center;
				image{
					width: 24upx;
					height: 24upx;
					margin-right: 5upx;
				}
			}
			.class-over{
				font-size:24upx;
				font-weight: 500;
				color: rgba(102,102,102,1);
				margin-bottom: 6upx;
			}
		}
		&-li_status{
			width: 100upx;
			height: 30upx;
			background-image: url(../../static/image/index/ic-tour.png);
			background-repeat: no-repeat;
			background-size: cover;
			font-size: 18upx;
			line-height: 30upx;
			color: #FFFFFF;
			text-align: center;
		}
		&-li_price{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.product_info_add{
				width: 44upx;
				height: 44upx;
			}
		}
		&-li_toll{
			font-size:28upx;
			color: #FF2842;
			font-weight: bold;
			&::before{
				content: "￥";
				font-size: 20upx;
				font-weight: 500;
			}
		}
		&-li_btn{
			width: 145upx;
			height: 51upx;
			line-height: 51upx;
			background:linear-gradient(90deg,rgba(253,115,119,1),rgba(255,40,66,1));
			border-radius:26upx;
			color: #FFFFFF;
			font-size: 24upx;
			text-align: center;
			cursor:pointer;
		}
	}
ul{
		margin: 0;
		padding: 0;
		li{
			list-style: none;
		}
	}
	.liwidth{
		width: 50%;
	}
	.liwidthF{
		width: 33.3%;
	}
	.newRecommend{
		overflow: hidden;
		margin-bottom: 20upx;
		position: relative;
	}
	.newRecommend-warp{
		width: 95%;
		margin: 0 auto;
		background: #fff;
		border-radius: 15upx;
		overflow: hidden;
		position: relative;
		.newRecommend-warp-perve{
			position: relative;
		}
		.sc-tour-li-tags{
			position: absolute;
			top: 0;
			left:10%;
			width: 65upx;
			height: 64upx;
			font-size:18upx;
			padding: 0 10upx;
			box-sizing: border-box;
			color: #FFFFFF;
			word-wrap: break-word;
			word-break: break-all;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			background-image: url('https://jy-shops.oss-cn-beijing.aliyuncs.com/client/image/add_images/sc-tags.png');
			background-size: cover;
			z-index: 10;
			transform-origin: 0 0;
			text{
				transform: scale(0.8,0.8);
				line-height: 1.3;
			}
		}
	}
	ul{
		// display: flex;
		// justify-content: space-around;
		// flex-wrap: wrap;
		padding: 0 10upx;
		margin-top: 15upx;
		li{
			float: left;
			position: relative;
			// margin: 15upx 0;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			padding-bottom: 15upx;
			font-size: 24upx;
			overflow: hidden;
			
			
			image{
				width: 100%;
				margin-top: 0;
				height: 340upx;
			}
			
			.goodsInfo{
				margin-right: auto;
				margin-top: 15upx;
				padding:15upx;
				.goodsTitle{
					margin-bottom: 10upx;
					display: block;
					font-size: 26upx;
					line-height: 40upx;
					height: 80upx;
					overflow: hidden;
				}
				.goodsTitle-dan{
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
					font-size: 26upx;
					margin-bottom: 10upx;
					display: block;
				}
				.goodsDiscount{
					padding:4upx 6upx;
					background:#ffe6cc;
					color: #ff9900;
					font-size: 22upx;
				}
				.product_info_price{
					color: #999999;
					font-size: 20upx;
					text-decoration: line-through;
					margin-bottom: -26upx;
					display: block;
					margin-top:34upx;
				}
				.product_info_b {
					font-size: 20upx;
					color: #FF2842;
					margin-top:34upx;
					margin-bottom: 20upx;
					.integral_num {
						font-size:28upx;
						font-weight: bold;
						&::before{
							content: "￥";
							font-size:20upx;
						}
					}
				
					.price {
						margin-left: 20upx;
						color: #999999;
						text-decoration: line-through;
					}
				}
				
			}
			.product_info_add{
				position: absolute;
				width: 44upx;
				height: 44upx;
				bottom:0;
				right: 0;
			}
		}
	}
</style>
